<script setup lang="ts">
import {NScrollbar} from 'naive-ui'
import {useElementSize, useWindowSize} from '@vueuse/core'
import {watch, ref} from "vue"
import {elSizeUtil} from 'st-common-ui-utils'

/**
 * 组件配置选项
 */
defineOptions({
  name: 'StnScrollbar',
})

/**
 * 组件参数
 */
const {
  responsive = 'self',
  alwaysScrollbarWidth = 0,
  height = 'auto',
  maxHeight = 'auto',
} = defineProps<{
  // 组件响应式策略
  responsive?: 'self' | 'screen';
  // 滚动条一直显示的宽度阈值
  alwaysScrollbarWidth?: number;
  // 内容区域的高度
  height?: number | string;
  // 内容区域的最大高度
  maxHeight?: number | string;
}>()

/**
 * 响应式处理
 */
// 窗口宽度
const {width: windowWidth} = useWindowSize()
// 组件根元素引用
const stnScrollbarRef = ref<HTMLElement | null>(null)
// 组件根元素宽度
const {width: stnScrollbarWidth} = useElementSize(stnScrollbarRef)
// 是否一直显示滚动条
const isAlwaysScrollbar = ref(false)
// 监听宽度变化
watch(
  () => responsive === 'self' ? stnScrollbarWidth.value : windowWidth.value,
  (w) => {
    isAlwaysScrollbar.value = w <= alwaysScrollbarWidth
  },
  {immediate: true}
)
</script>

<template>
  <div
    ref="stnScrollbarRef"
    class="stn-scrollbar"
  >
    <n-scrollbar
      :style="{
        height: elSizeUtil.elSizePreHandler(height),
        maxHeight: elSizeUtil.elSizePreHandler(maxHeight),
      }"
      :trigger="isAlwaysScrollbar ? 'none' : 'hover'"
    >
      <slot></slot>
    </n-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.stn-scrollbar {
  width: 100%;
}
</style>
